import { Alert, Tabs, Message } from '@aws-amplify/ui-react';
import { TerminalCommand } from '@/components/InstallScripts';
import VitePolyfill from './shared/vite-polyfill.mdx';
import VitePolyfillTS from './shared/vite-polyfill-ts.mdx';

## Astro

### `Uncaught ReferenceError: global is not defined`

<Message
  variation="filled"
  colorTheme="info"
  >
  Note: this issue was fixed in `aws-amplify` version 6
</Message>

When working with a [Astro](https://astro.build/) project you must make a few modifications. Please follow the steps below.
<Tabs.Container defaultValue="TypeScript">
  <Tabs.List>
    <Tabs.Item value="TypeScript">TypeScript</Tabs.Item>
    <Tabs.Item value="JavaScript">JavaScript</Tabs.Item>
  </Tabs.List>
  <Tabs.Panel value="TypeScript">
**1.** Add the following script to the bottom of the `index.astro` file. This will only run on the client side and will polyfill Node globals.

```html
<script>
  window.global = window;
  window.process = {
    env: { DEBUG: undefined },
  } as unknown as NodeJS.Process;
  var exports = {};
</script>
```

**2.** Update the `astro.config.mjs` to add a resolve object inside the `defineConfig({})` as seen below.

```js
export default defineConfig({
  plugins: [react()],
  resolve: {
      alias: [
      {
        find: './runtimeConfig',
        replacement: './runtimeConfig.browser',
      },
    ]
  }
})
```
  </Tabs.Panel>
  <Tabs.Panel value="JavaScript">
**1.** Add the following script to the bottom of the `index.astro` file. This will only run on the client side and will polyfill Node globals.

```html
<script>
  window.global = window;
  window.process = {
    env: { DEBUG: undefined },
  }
  var exports = {};
</script>
```

**2.** Update the `astro.config.mjs` to add a resolve object inside the `defineConfig({})` as seen below.

```js
export default defineConfig({
  plugins: [react()],
  resolve: {
      alias: [
      {
        find: './runtimeConfig',
        replacement: './runtimeConfig.browser',
      },
    ]
  }
})
```
  </Tabs.Panel>
</Tabs.Container>


## Create React App

### CRA 4: `Uncaught ReferenceError: g is not defined`

When using [Geo components](/connected-components/geo) and Create React App v4, users may experience the following error when rendering the `<MapView>` component in a production build:
```markup
Uncaught ReferenceError: g is not defined
```
The error is related to this [maplibre-gl issue](https://github.com/maplibre/maplibre-gl-js/issues/1011#issuecomment-1073112585) and surfaces due to the dropped support for Internet Explorer in `maplibre-gl` v2. To correct this error, you'll need to adjust your browser target for production to exclude Internet Explorer:

**1.** In your `package.json` file of your Create React App, adjust the `browserslist.production` block from:
```json
"browserslist": {
  "production": [
    ">0.2%",
    "not dead",
    "not op_mini all"
  ],
  ...
}
```
to the following:
```json
"browserslist": {
  "production": [
    "defaults",
    "not ie 11"
  ],
  ...
}
```
**2.** Rebuild your production application using `npx run build`.

**3.** Run your production build using a tool like [serve](https://www.npmjs.com/package/serve) (`serve -s build`) and verify the `<MapView>` component renders without error.

### CRA 4: Can’t import the named export ‘Amplify’ from non EcmaScript module (only default export is available)

Create React App v4 is not officially supported by Amplify UI. When you use it, you may get the following error

```markup
 ./node_modules/@aws-amplify/ui-react/dist/esm/components/..\/\*.mjs
 Can’t import the named export ‘Amplify’ from non EcmaScript module (only default export is available)
```

To resolve the error, you may either (1) upgrade to Create React App version 5 ([Migration Guide](https://github.com/facebook/create-react-app/blob/main/CHANGELOG.md#migrating-from-40x-to-500)), or (2) override the webpack config using tools like [React App Rewired](https://github.com/timarney/react-app-rewired), [Craco](https://craco.js.org/docs/configuration/webpack/) to add the following rule:

```js
{
  module: {
    rules: [
      {
        test: /\.mjs$/,
        include: /node_modules/,
        type: 'javascript/auto'
      }
    ]
  }
}
```

## Jest

### `window.URL.createObjectURL is not a function`

As of v2.15.0 of `@aws-amplify/ui-react` which included the release of Geo components, users of the Jest testing framework may run into the following error when attempting to run tests:

```markup
window.URL.createObjectURL is not a function
```

Please follow the steps below to resolve this issue.

**1.** Navigate to or create a [Jest setup file](https://jestjs.io/docs/configuration#setupfilesafterenv-array) for your project.

**2.** Add the following code to polyfill the unrecognized function in your Jest setup file:

```js
if (typeof window.URL.createObjectURL === 'undefined') {
  window.URL.createObjectURL = jest.fn();
}
```

This is a known problem when using the `jsdom` library (a dependency of Jest) with a package that uses an unrecognized function. See [this issue](https://github.com/jsdom/jsdom/issues/1721).

## Next.js

### Next 13.4+: React Server Components

Next.js 13.4+ introduces [App Router](https://nextjs.org/docs/13/app/building-your-application/routing#the-app-router) with the usage of [Server Components](https://nextjs.org/docs/app/building-your-application/rendering/server-components). Amplify UI components are intended to be used on the client side. See [here](#attempted-import-error-useform-is-not-exported-from-react-hook-form-imported-as-useform) for solutions.

### Next 13.4+: `Module not found` Errors

When you use Amplify with Next.js App Router, you will see the follow errors from `aws-crt` and `encoding` in the server terminal:

```markup
./node_modules/node-fetch/lib/index.js
Module not found: Can't resolve 'encoding' in 'xxx'

./node_modules/@aws-sdk/client-sts/node_modules/@aws-sdk/util-user-agent-node/dist-cjs/is-crt-available.js
Module not found: Can't resolve 'aws-crt' in 'xxx'
```

These errors will not affect the use and functionality of the client, nor will errors appear in the browser console. This is a known transitive issue when using the AWS SDK. The issue is currently tracked [here](https://github.com/aws-amplify/amplify-js/issues/11030).

## Server-Side Rendering (SSR)

### Attempted import error: 'useForm' is not exported from 'react-hook-form' (imported as 'useForm').

If you attempt to use Amplify with Server-side rendering (SSR), you may encounter the following error:

```markup
./node_modules/@aws-amplify/ui-react-core/dist/esm/components/FormCore/FormProvider.mjs
Attempted import error: 'useForm' is not exported from 'react-hook-form' (imported as 'useForm').
```

Amplify UI components are interactive and designed to work on the client side. To use them inside of Server Components, you must wrap them in a Client Component with the `"use client"` directive. For more information, see the Next.js [documentation](https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#using-third-party-packages-and-providers) on how you could achieve this.

## Vite

### `Uncaught ReferenceError: global is not defined`

<Message
  variation="filled"
  colorTheme="info"
  >
  Note: this issue was fixed in `aws-amplify` version 6
</Message>

When working with a [Vite](https://vitejs.dev) project you must make a few modifications. Please follow the steps below.

<Tabs.Container defaultValue="TypeScript">
  <Tabs.List>
    <Tabs.Item value="TypeScript">TypeScript</Tabs.Item>
    <Tabs.Item value="JavaScript">JavaScript</Tabs.Item>
  </Tabs.List>
  <Tabs.Panel value="TypeScript">
    <VitePolyfillTS />
  </Tabs.Panel>
  <Tabs.Panel value="JavaScript">
    <VitePolyfill />
  </Tabs.Panel>
</Tabs.Container>

> If you are still having issues, please see comments on the following issue for additional [Vite workarounds](https://github.com/aws-amplify/amplify-js/issues/9639). Note that there is active ongoing work to make these modifications unnecessary.

## Webpack

### Webpack 5+: `Uncaught ReferenceError: process is not defined`

<Message
  variation="filled"
  colorTheme="info"
  >
  Note: this issue has been fixed in `aws-amplify` version 6. The polyfill is only required for projects that use `aws-amplify` version 5 (or earlier) with Webpack version 5 (or later).
</Message>

Follow the instructions below if you are using Webpack 5:


1. Add
   [node-polyfill-webpack-plugin](https://www.npmjs.com/package/node-polyfill-webpack-plugin)
   as dev dependency:

<Tabs.Container defaultValue="npm">
  <Tabs.List>
    <Tabs.Item value="npm">npm</Tabs.Item>
    <Tabs.Item value="yarn">yarn</Tabs.Item>
  </Tabs.List>
  <Tabs.Panel value="npm">
    <TerminalCommand command="npm install node-polyfill-webpack-plugin -D" />
  </Tabs.Panel>
  <Tabs.Panel value="yarn">
    <TerminalCommand command="yarn add node-polyfill-webpack-plugin -D" />
  </Tabs.Panel>
</Tabs.Container>

2. Add the plugin to your `webpack.config.js` plugins list:\_

```js
  plugins: [
    new NodePolyfillPlugin(), // Polyfill Node.js globals (e.g. global, process, etc)
  ],
```

### Webpack 4: Can’t import the named export ‘Amplify’ from non EcmaScript module (only default export is available)

Follow [here](#cra-4-cant-import-the-named-export-amplify-from-non-ecmascript-module-only-default-export-is-available) for solutions.

